<template>
	<view>
		<u-tabbar :active="tabStore.activeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :icon="getTabbarIcon(item, index)"
			               :text="item.text" @click="handleTabbarItemClick(item, index)"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup>
import {localTabStore} from '@/pinia-store/tab.js';
import {onLoad} from '@dcloudio/uni-app';

let tabStore = localTabStore();

/**
 * @description tabbar 选项
 */
const tabbarItems = [
    // {
    //     pagePath: '/pages/views/Main/index',
    //     text: '主页',
    //     iconPath: 'home',
    //     selectedIconPath: 'home-fill'
    // },
    {
        pagePath: '/pages/views/Home/index',
        text: '首页',
        iconPath: 'list',
        selectedIconPath: 'list-dot'
    },
	{
	    pagePath: '/pages/views/Collage/index',
	    text: '院校',
	    iconPath: 'chat',
	    selectedIconPath: 'plus-circle-fill'
	},
	{
	    pagePath: '/pages/views/Study/index',
	    text: '学习',
	    iconPath: 'chat',
	    selectedIconPath: 'chat-fill'
	},
    {
        pagePath: '/pages/views/My/index',
        text: '我的',
        iconPath: 'account',
        selectedIconPath: 'account-fill'
    }
];

onLoad(() => {
    uni.switchTab({
        url: tabbarItems[tabStore.activeTab].pagePath
    });
});

/**
 * @description 点击tabbar按钮
 */
const handleTabbarItemClick = (item, index) => {
    const path = item.pagePath;
    if (index === tabStore.activeTab) {
        return;
    } else {
        tabStore.activeTab = index;
        uni.switchTab({
            url: path
        });
    }

};

/**
 * @description 图标的切换
 */
const getTabbarIcon = (item, index) => {
    return tabStore.activeTab === index ? item.selectedIconPath : item.iconPath;
};
</script>
